<template>
  <section class="hello">
    <!-- 第2行 -->
    <div class="row row1">
      <div class="grid width30">
        <div class="contain">
          <div class="width100 height50 top">
            <ul class="flex height">
              <li class="name-word">
                <dl class="data-word">
                  <dt>近30天园区就业机会</dt>
                  <dd class="line1-dd">{{ days30 }}</dd>
                </dl>
              </li>
            </ul>
          </div>
          <div class="width100 height50 bottom">
            <div class="grid height">
              <div class="grid-body">
                <ul class="flex height">
                  <li class="name-word">
                    <dl class="data-word">
                      <dt>园区平均薪资(元/月)</dt>
                      <dd class="line1-dd">{{ avgSalary }}</dd>
                    </dl>
                  </li>
                </ul>
              </div>
              <div class="grid-foot">厦门平均薪资(元/月) {{ cityAvg }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="grid width70">
        <div class="grid-title">园区就业要求</div>
        <div class="grid-body">
          <div class="width50 height fl circle1">
            <div id="bargrid" class="chartsCube"></div>
          </div>
          <div class="width50 height fl circle">
            <div id="bargrid2" class="chartsCube"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第一行 -->
    <div class="row row2">
      <div class="grid width100">
        <div class="grid-title">热门就业岗位TOP10</div>
        <div class="grid-body">
          <div class="col-tooltip">
            <section>
              <span>高于/低于园区平均薪资</span>
              <span>大专以下</span>
              <span>大专</span>
              <span>本科及以上</span>
              <span>0-2年</span>
              <span>3-5年</span>
              <span>5年以上</span>
            </section>
          </div>
          <div class="left-column">
            <ul class="height work-line">
              <li class="title">
                <div class="col-left">
                  <!--  <span class="work-index"></span>
                  -->
                  <span class="work-name">岗位名称</span>
                  <span class="price">平均薪资</span>
                  <span class="icon"></span>
                </div>
                <!--  左边图 -->
                <div class="col-right-left">学历要求</div>
                <!--  右边图 -->
                <div class="col-right-right">经验要求</div>
              </li>
              <!-- 每一行 -->
              <li v-for="(d, key, index) in datas" v-if="index>=0 && index<5 " :key="index">
                <div class="col-left" v-for="(s,k) in d" :key="k">
                  <span class="work-index">{{ key }}</span>
                  <span class="work-name">{{ k }}</span>
                  <span class="price">{{ s["平均薪资"] }}</span>
                  <span
                    class="icon"
                    v-if="s['平均薪资增长比例']>
                                        0"
                  >
                    <i class="iconfont icon-up red"></i>
                  </span>
                  <span class="icon" v-if="s['平均薪资增长比例']<0">
                    <i class="iconfont icon-down green"></i>
                  </span>
                </div>
                <!--  左边图 -->
                <div class="col-right-left">
                  <div :id="'xiaoshou'+ index" class="chartsCube"></div>
                </div>
                <!--  右边图 -->
                <div class="col-right-right">
                  <div :id="'experence'+ index" class="chartsCube"></div>
                </div>
              </li>
            </ul>
          </div>
          <div class="left-column">
            <ul class="height work-line">
              <li class="title">
                <div class="col-left">
                  <!-- <span class="work-index"></span>
                  -->
                  <span class="work-name">岗位名称</span>
                  <span class="price">平均薪资</span>
                  <span class="icon"></span>
                </div>
                <!--  左边图 -->
                <div class="col-right-left">学历要求</div>
                <!--  右边图 -->
                <div class="col-right-right">经验要求</div>
              </li>
              <!-- 每一行 -->
              <li v-for="(d,key,index) in datas" v-if="index>4 && index<10 " :key="index">
                <div class="col-left" v-for="(s,k) in d" :key="k">
                  <span class="work-index">{{ key }}</span>
                  <span class="work-name">{{ k }}</span>
                  <span class="price">{{ s["平均薪资"] }}</span>
                  <!-- <span class="icon">{{ s['平均薪资增长比例']>0? '上升': '下降' }}</span>
                  -->
                  <span class="icon" v-if="s['平均薪资增长比例']>
                                    0">
                    <i class="iconfont icon-up red"></i>
                  </span>
                  <span class="icon" v-if="s['平均薪资增长比例']<0">
                    <i class="iconfont icon-down green"></i>
                  </span>
                </div>
                <!--  左边图 -->
                <div class="col-right-left">
                  <div :id="'xiaoshou'+ index" class="chartsCube"></div>
                </div>
                <!--  右边图 -->
                <div class="col-right-right">
                  <div :id="'experence'+ index" class="chartsCube"></div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import echarts from 'echarts';
import {
  mapState,
  mapActions,
  mapMutations
} from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState({
      newsUrl: state => state.Work.newsUrl,
      datas: state => state.Work.datas,
      days30: state => state.Work.days30,
      avgSalary: state => state.Work.avgSalary,
      cityAvg: state => state.Work.cityAvg,
    })
  },
  methods: {
    ...mapActions([
      'askNews'
    ]),
    setData(data) { //尝试设置数据
      return data
    },
    drawAll: function () {
      setTimeout(() => {
        this.drawbar('bargrid');
        this.drawbar('bargrid2');
        this.barMore('xiaoshou0');
        this.barMore('xiaoshou1');
        this.barMore('xiaoshou2');
        this.barMore('xiaoshou3');
        this.barMore('xiaoshou4');
        this.barMore('xiaoshou5');
        this.barMore('xiaoshou6');
        this.barMore('xiaoshou7');
        this.barMore('xiaoshou8');
        this.barMore('xiaoshou9');
        this.barMore('experence0');
        this.barMore('experence1');
        this.barMore('experence2');
        this.barMore('experence3');
        this.barMore('experence4');
        this.barMore('experence5');
        this.barMore('experence6');
        this.barMore('experence7');
        this.barMore('experence8');
        this.barMore('experence9');
      }, 800)
    },
    drawbar(id) {
      if (!id) return false;
      let myChart = echarts.init(document.getElementById(id));
      let option = {
        color: ['#1cd389', '#668eff', '#ffc751', '#ff6e73', '#4162ff', '#9692ff', '#16c1af', '#00b7ff', '#24e2be', '#66bb6a', '#9ccc65', '#dce775', '#ffee58', '#f4c97d', '#ffaf83', '#ff8a65', '#f48cb6', '#e283e2', '#ba83ea', '#1cd389', '#668eff', '#ffc751', '#ff6e73', '#4162ff', '#9692ff', '#16c1af', '#00b7ff', '#24e2be', '#66bb6a', '#9ccc65', '#dce775', '#ffee58', '#f4c97d', '#ffaf83', '#ff8a65', '#f48cb6', '#e283e2', '#ba83ea', ],
        title: {
          text: '去年',
          subtext: '12月',
          x: 'center',
          y: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 22,
            color:'#ccc'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params, ticket, callback) {
            var res = params.seriesName;
            res += '<br/>' + params.name + ' : ' + params.percent + '%';
            return res;
          }
        },
        legend: {
          orient: 'vertical',
          right: '10%',
          bottom: '5%',
          data: ['食堂', '超市', '刷卡', '交通'],
          itemWidth: 20,
          itemHeight: 10,
          textStyle: { //图例文字的样式
            color: '#ccc',
            fontSize: 12
          },
        },
        series: [{
          name: '消费',
          type: 'pie',
          selectedMode: 'single',
          radius: ['50%', '70%'],
          label: {
            normal: {
              position: 'inner',
              textStyle: {
                color: '#fff',
                fontSize: 14
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [{
            value: 11,
            name: '食堂'
          }, {
            value: 22,
            name: '超市'
          }, {
            value: 33,
            name: '刷卡'
          }, {
            value: 22,
            name: '交通'
          }]
        }]
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
          myChart.resize();
      });
    },
    barMore(id) {

      if (!id) return false;
      let myChart = echarts.init(document.getElementById(id));
      let option = {
         color: ['#1cd389', '#668eff', '#ffc751', '#ff6e73', '#4162ff', '#9692ff', '#16c1af', '#00b7ff', '#24e2be', '#66bb6a', '#9ccc65', '#dce775', '#ffee58', '#f4c97d', '#ffaf83', '#ff8a65', '#f48cb6', '#e283e2', '#ba83ea', '#1cd389', '#668eff', '#ffc751', '#ff6e73', '#4162ff', '#9692ff', '#16c1af', '#00b7ff', '#24e2be', '#66bb6a', '#9ccc65', '#dce775', '#ffee58', '#f4c97d', '#ffaf83', '#ff8a65', '#f48cb6', '#e283e2', '#ba83ea', ],
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            var res = params.name;
            var myseries = option.series;
            for (var i = 0; i < myseries.length; i++) {
              res += myseries[i].name + ' : ' + myseries[i].data[0] + '%</br>';
            }
            return res;
          }
        },
        xAxis: {
          type: 'value',
          show: false,
        },
        yAxis: {
          type: 'category',
          show: false,
          axisTick: {
            show: false
          }
        },
        series: [{
          type: 'bar',
          name: '大专以下',
          data: [10],
          stack: 'income',
          barWidth: 13,
          itemStyle: {
            normal: {
              color: '#1f66f8',
              barBorderRadius: [5, 0, 0, 5],
            }
          },
        }, {
          type: 'bar',
          name: '大专',
          data: [40],
          stack: 'income',
          barWidth: 13,
          itemStyle: {
            normal: {
              color: '#14b9f6',
              barBorderRadius: [0],
            }
          },
        }, {
          type: 'bar',
          name: '本科以上',
          data: [50],
          stack: 'income',
          barWidth: 13,
          itemStyle: {
            normal: {
              color: '#14f6cf',
              barBorderRadius: [0, 5, 5, 0],
            }
          }
        }]
      };
     
      myChart.setOption(option);
      window.addEventListener("resize", function () {
          myChart.resize();
      });
    }
  },
  mounted: function () {
    // this.$store.dispatch();
    this.drawAll()
  },
  created() {
    this.askNews(this.newsUrl)
  },
}
</script>
<style lang="scss" scoped>
.circle1 {
  border-right: 0.0625rem solid #3a3a3e;
  box-sizing: border-box;
}
.iconfont.red {
  color: red;
}
.iconfont.green {
  color: green;
}
.col-tooltip {
  width: 100%;
  height: 15%;
  background-color: #202024;
  box-sizing: border-box;
  color: #898989;
  font-size: 0.875rem;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  span {
    margin: 0 10px;
    font-size: 1.2rem;
  }
}
.work-line {
  li {
    height: 14.7%;
    &.title {
      color: #898989;
      font-size: 1.2rem;
      display: flex;
      align-items: center;
    }
  }
}
.col-right-left {
  width: 25%;
  height: 16px;
  float: left;
}
.col-right-right {
  width: 25%;
  height: 16px;
  float: left;
}
.col-left {
  width: 35%;
  float: left;
}
.work-index {
  display: inline-block;
  width: 0.9375rem;
  height: 0.9375rem;
  background: #776efd;
  border-radius: 50%;
  color: #fff;
  font-size: 0.75rem;
  text-align: center;
}
.work-name {
  display: inline-block;
  width: 35%;
  height: 100%;
}
.left-column {
  width: 50%;
  height: 100%;
  float: left;
  font-size: 0.8125rem;
  ul {
    height: 100%;
    li {
    }
  }
}
.chartsCube {
  width: 100%;
  height: 100%;
}
.scroll-div {
  width: 90%;
  height: 90%;
  margin: 0 auto;
}
.ccc {
  color: #ccc;
}
.company-item {
  li {
    float: left;
  }
}
.colorfff {
  overflow: hidden;
  color: #fff;
}
.row1 {
  height: 45%;
}
.row2 {
  height: 55%;
}
.company-val {
  padding: 30px;
  ul {
    li {
      float: left;
      list-style: none;
      line-height: 4;
      &:first-child {
        width: 60%;
      }
      &:nth-child(2) {
        width: 40%;
      }
    }
  }
}
.data-word {
  dt {
    color: #898989;
  }
  dd {
    font-size: 1.5625rem;
    text-align: center;
    color: #fff;
    &.line1-dd {
      font-size: 3rem;
    }
  }
}
</style>